<template>
    <el-container>
        <el-header>
            <el-space :size="150">
                <span style="width:20px">
                    <el-button type="success" @click="addSubjectTypeClick()">添加科目类型</el-button>

                </span>
                <span style="width:20px">
                    <el-button type="success" @click="addSubjectClick()">添加科目</el-button>
                </span>
            </el-space>

        </el-header>
        <el-container>
            <el-aside width="200px">
                
                 <el-scrollbar height="700px">
                    <TreeCommponent v-if="oneTableData != null" :treeData="oneTableData" @treeComponent="treeComponent" :defaultExpandAll="true"
                    :showCheckBox="false"></TreeCommponent>
                 </el-scrollbar>
                
            </el-aside>
            <el-main>
                <el-empty description="点击右侧开始操作" :image-size="200" v-if="!show && !subjectShow"/>
                <el-container>
                    <el-header>
                        
                        <ElDescriptionsComponents v-if="openAllData != null" :modelValue="openAllData" v-show="show" @isUpdateData="isUpdateElDescriptionData" @isdelUpdateDate="isdelUpdateDate">
                        </ElDescriptionsComponents>
                    </el-header>
                    <el-header></el-header>
                    <el-header></el-header>
                    <el-header></el-header>
                    <el-main>
                        
                        <TableSubjectData v-if="subjectData != null" :modelValue="subjectData" v-show="subjectShow" @isUpdateData="isUpdateData">
                        </TableSubjectData>
                    </el-main>
                </el-container>
            </el-main>
        </el-container>
    </el-container>
    <AddIndustryDisalogFormVisible :modelValue="openAddIndustryDisalogFormVisible"
        @backData="addIndustryDisalogFormVisibleBackData"></AddIndustryDisalogFormVisible>
    <AddAccountTypeDisalogFormVisible :modelValue="openAddAccountTypeDisalogFormVisible"
        @backData="addAccountTypeDisalogFormVisibleBackData" @isUpdateTableData="isUpdateData"></AddAccountTypeDisalogFormVisible>
</template>

<script>
import { reactive, ref } from '@vue/reactivity';
import axios from 'axios';
import { computed, onBeforeMount, onMounted, watch } from '@vue/runtime-core';
import TreeCommponent from '../ReuseComponent/TreeCommponent.vue';
import ElDescriptionsComponents from '../ReuseComponent/ElDescriptionsComponents.vue';
import TableSubjectData from '../ReuseComponent/TableSubjectData.vue';
import AddIndustryDisalogFormVisible from '../ReuseComponent/industry/addIndustryDisalogFormVisible.vue'
import { useStore } from 'vuex'
import AddAccountTypeDisalogFormVisible from '../ReuseComponent/industry/addAccountTypeDisalogFormVisible.vue';
export default {
    setup() {
        let store = useStore();
        let show = ref(false);
        let subjectShow = ref(false);

        let treeString = []

        //数据获取数据存放位置 
        let tableData = reactive({
            data: null,
            datas: null,
            subjectData: null,
            industryNameArray:[]
        });
        //挂载后去数据库获取数据
        onMounted(() => {
            axios.get("/api/industryAccountType/selectAll").then((response) => {
                if (response.status === 200) {
                    tableData.data = response.data.data;
                    store.commit('insertData',tableData.data)
                    //console.log(store.state.subjectData)
                     //console.log('vuex中获取数据',store.state.subjectData)
                }
            });
        });
        watch(()=>store.state.subjectData,(newVal) => {
            //console.log("1")
            tableData.data = newVal
            chuancan(isUpdateTableData.value)
            chuancans(isUpdateElDescriptionDatas.value)
            fsdfs(isdelUpdateDates.value)
            console.log("123",isdelUpdateDates.value)
            isUpdateTableData.value = false
            isUpdateElDescriptionDatas.value = false
            isdelUpdateDates.value = false
        },{
            deep:true,
            immediate: false
        })
        //数据表格所需数据的计算属性
        const oneTableData = computed(() => {
            //console.log("2")
            return tableData.data;
        });

        
        const openAllData = computed(() => {
            //console.log("sfjs")
            return tableData.datas;
        });
        //科目表格数据
        const subjectData = computed(() => {
            return tableData.subjectData;
        });
        //TreeCommponent子组件传过来的数据接收函数
        let treeId = ref()
        function treeComponent(a){
            treeId.value = a.industryId
            if(a.level == 3){
                
                
                //console.log(treeId.value)
                treeString = []
                tableData.subjectData = a.accountTypeList
                subjectShow.value = true
                let arr = a.industryTree.trim().split('/')
                //循环遍历出科目的类型
                arr.forEach((val,index) => {
                    if(val == ''){
                        arr.splice(index,1)
                    }
                });
                tableData.data.forEach((val,index) => {
                    if(val.industryId == arr[0]){
                        treeString.push(val.industryName)
                        val.industryAccountType.forEach((v)=>{
                            if(v.industryId == arr[1]){
                                treeString.push(v.industryName)
                                treeString.push(a.industryName)
                                store.state.questionBank.subjectModel.subjectTypeNameArray = treeString
                                //console.log('是否已经存进去',store.state.questionBank.subjectModel.subjectTypeNameArray)
                            }
                        })
                    }
                })
                
            }else{
                subjectShow.value = false
            }
            //console.log(treeId.value)
            tableData.datas = a
            show.value = true
        }


        //********************************************************* */
        //添加操作
        //添加科目类型
        function addSubjectTypeClick(a){
           
            openAddIndustryDisalogFormVisible.value = true
        }   
        //添加弹出层
        let openAddIndustryDisalogFormVisible = ref(false)
        //添加弹出层返回数据
        function addIndustryDisalogFormVisibleBackData(a){
            openAddIndustryDisalogFormVisible.value = a
        }
        //添加科目
        function addSubjectClick(){
            openAddAccountTypeDisalogFormVisible.value = true
        }
        let openAddAccountTypeDisalogFormVisible = ref(false)
        function addAccountTypeDisalogFormVisibleBackData(a){
            openAddAccountTypeDisalogFormVisible.value = a
        }
        //向组件传参方法
        function chuancan(a){
            if(a){
                tableData.data.forEach((val)=>{
                    //console.log('a')
                    val.industryAccountType.forEach((vals)=>{
                        //console.log('b')
                        vals.industryAccountType.forEach((valls)=>{
                            //console.log(valls.industryId)
                            if(valls.industryId == treeId.value){
                                tableData.subjectData = valls.accountTypeList
                                chuancans(a)
                                //console.log('d')
                            }
                        })
                    })
                })
            }
        }
        function chuancans(a){
            //console.log('treeId',treeId.value)
            if (a) {
                tableData.data.forEach((val) => {
                    if (val.industryId == treeId.value) {
                       // console.log("1")
                        tableData.datas = val
                        return
                        //console.log('d')
                    }
                    //console.log('a')
                    val.industryAccountType.forEach((vals) => {
                        if (vals.industryId == treeId.value) {
                            //console.log("2")
                            tableData.datas = vals
                            return
                            //console.log('d')
                        }
                        //console.log('b')
                        vals.industryAccountType.forEach((valls) => {
                            //console.log(valls.industryId)
                            if (valls.industryId == treeId.value) {
                               // console.log("3")
                                tableData.datas = valls
                                return
                                //console.log('d')
                            }else{
                                
                            }
                        })
                    })
                })
            }
        }
        function fsdfs(a){
            console.log("a",a)
            if(a){
                console.log("fsdf")
                show.value = false
                subjectShow.value = false
                tableData.datas = null
            }
        }
        //table表是否需要更新下数据
        let isUpdateTableData = ref(false)
        function isUpdateData(a){
            isUpdateTableData.value = a
            //console.log(treeId.value)
            
        }
        let isUpdateElDescriptionDatas = ref(false)
        function isUpdateElDescriptionData(a){
            //console.log(a)
            isUpdateElDescriptionDatas.value =  a
        }
        let isdelUpdateDates = ref(false)
        function isdelUpdateDate(a){
            isdelUpdateDates.value = a
        }
        let showEmpty = ref(true)
        return {
            oneTableData,
            show,
            openAllData,
            subjectShow,
            subjectData,
            treeComponent,
            tableData,
            showEmpty,

            addIndustryDisalogFormVisibleBackData,
            openAddIndustryDisalogFormVisible,
            addSubjectTypeClick,

            openAddAccountTypeDisalogFormVisible,
            addAccountTypeDisalogFormVisibleBackData,
            addSubjectClick,

            isUpdateData,
            isUpdateElDescriptionData,
            isdelUpdateDate
        };
    },
    components: { TreeCommponent, ElDescriptionsComponents, TableSubjectData,AddIndustryDisalogFormVisible, AddAccountTypeDisalogFormVisible }
}
</script>

<style>
.el-button--text {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.el-button--text {
  margin-right: 15px;
}

</style>